<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
	</head>
	<body>
	
	<h1>1-多媒体对象（Media Object）</h1>
	<pre>
		该样式一般用户留言回复.
	.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
	.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。
	</pre>
	
	<ul class="media-list">
	    <li class="media">
	        <a class="media-left" href="#">
	            <img class="media-object" src="../img/HBuilder.png"
	                 alt="通用的占位符图像">
	        </a>
	        <div class="media-body">
	            <h4 class="media-heading">媒体标题</h4>
	            <p>这是一些示例文本。这是一些示例文本。
	                这是一些示例文本。这是一些示例文本。
	                这是一些示例文本。这是一些示例文本。
	                这是一些示例文本。这是一些示例文本。
	                这是一些示例文本。这是一些示例文本。</p>
	            <!-- 嵌套的媒体对象 -->
	            <div class="media">
	                <a class="media-left" href="#">
	                    <img class="media-object" src="../img/HBuilder.png"
	                         alt="通用的占位符图像">
	                </a>
	                <div class="media-body">
	                    <h4 class="media-heading">嵌套的媒体标题</h4>
	                    这是一些示例文本。这是一些示例文本。
	                    这是一些示例文本。这是一些示例文本。
	                    这是一些示例文本。这是一些示例文本。
	                    这是一些示例文本。这是一些示例文本。
	                    这是一些示例文本。这是一些示例文本。
	                    <!-- 嵌套的媒体对象 -->
	                    <div class="media">
	                        <a class="media-left" href="#">
	                            <img class="media-object" src="../img/HBuilder.png"
	                                 alt="通用的占位符图像">
	                        </a>
	                        <div class="media-body">
	                            <h4 class="media-heading">嵌套的媒体标题</h4>
	                            这是一些示例文本。这是一些示例文本。
	                            这是一些示例文本。这是一些示例文本。
	                            这是一些示例文本。这是一些示例文本。
	                            这是一些示例文本。这是一些示例文本。
	                            这是一些示例文本。这是一些示例文本。
	                        </div>
	                    </div>
	                </div>
	            </div>
	            <!-- 嵌套的媒体对象 -->
	            <div class="media">
	                <a class="media-left" href="#">
	                    <img class="media-object" src="../img/HBuilder.png"
	                         alt="通用的占位符图像">
	                </a>
	                <div class="media-body">
	                    <h4 class="media-heading">嵌套的媒体标题</h4>
	                    这是一些示例文本。这是一些示例文本。
	                    这是一些示例文本。这是一些示例文本。
	                    这是一些示例文本。这是一些示例文本。
	                    这是一些示例文本。这是一些示例文本。
	                    这是一些示例文本。这是一些示例文本。
	                </div>
	            </div>
	        </div>
	    </li>
	    <li class="media">
	        <a class="media-right" href="#">
	            <img class="media-object" src="../img/HBuilder.png"
	                 alt="通用的占位符图像">
	        </a>
	        <div class="media-body">
	            <h4 class="media-heading">媒体标题</h4>
	            这是一些示例文本。这是一些示例文本。
	            这是一些示例文本。这是一些示例文本。
	            这是一些示例文本。这是一些示例文本。
	            这是一些示例文本。这是一些示例文本。
	            这是一些示例文本。这是一些示例文本。
	        </div>
	    </li>
	</ul>

	<h1>2-Bootstrap 列表组</h1>
	<pre>
	本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：
	向元素 &lt;ul&gt;" 添加 class .list-group。
	向 &lt;li&gt; 添加 class .list-group-item。
	</pre>
	<ul class="list-group">
	    <li class="list-group-item">免费域名注册<span class="badge">99</span></li>
	    <li class="list-group-item">免费 Window 空间托管</li>
	    <li class="list-group-item">图像的数量</li>
	    <li class="list-group-item">24*7 支持</li>
	    <li class="list-group-item">每年更新成本</li>
	</ul>
	
	<h2>2.2-向列表组添加锚点链接</h2>
	<div class="list-group">
		<a href="#" class="list-group-item active">
	    免费域名注册
		</a>
		<a href="#" class="list-group-item">24*7 支持</a>
		<a href="#" class="list-group-item">免费 Window 空间托管</a>
		<a href="#" class="list-group-item">图像的数量</a>
		<a href="#" class="list-group-item">每年更新成本</a>
	</div>
	
	<h2>2.3-向列表组添加自定义内容</h2>
	<div class="list-group">
	    <a href="#" class="list-group-item active">
	        <h4 class="list-group-item-heading">
	            入门网站包
	        </h4>
	    </a>
	    <a href="#" class="list-group-item">
	        <h4 class="list-group-item-heading">
	            免费域名注册
	        </h4>
	        <p class="list-group-item-text">
	            您将通过网页进行免费域名注册。
	        </p>
	    </a>
	    <a href="#" class="list-group-item">
	        <h4 class="list-group-item-heading">
	            24*7 支持
	        </h4>
	        <p class="list-group-item-text">
	            我们提供 24*7 支持。
	        </p>
	    </a>
	</div>
	
	<h1>3-Bootstrap 面板（Panels）</h1>
	<p>面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 
		&lt;div&gt; 元素添加 class .panel 和 class .panel-default,.panel-heading(面板头)
		panel-title(面板标题),.panel-body(面板体),.panel-footer(面板脚注)
	</p>
	<div class="panel panel-default">
	    <div class="panel-heading">
	        <h3 class="panel-title">
	            带有 title 的面板标题
	        </h3>
	    </div>
	    <div class="panel-body">
	        面板内容
	    </div>
	    <div class="panel-footer">面板脚注</div>
	</div>
	
	<h2>3.2-带语境色彩的面板</h2>
	<p>使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、
		panel-danger，来设置带语境色彩的面板</p>
		
	<div class="panel panel-primary">
	    <div class="panel-heading">
	        <h3 class="panel-title">面板标题</h3>
	    </div>
	    <div class="panel-body">
	        这是一个基本的面板
	    </div>
	</div>
	<div class="panel panel-success">
	    <div class="panel-heading">
	        <h3 class="panel-title">面板标题</h3>
	    </div>
	    <div class="panel-body">
	        这是一个基本的面板
	    </div>
	</div>
	<div class="panel panel-info">
	    <div class="panel-heading">
	        <h3 class="panel-title">面板标题</h3>
	    </div>
	    <div class="panel-body">
	        这是一个基本的面板
	    </div>
	</div>
	<div class="panel panel-warning">
	    <div class="panel-heading">
	        <h3 class="panel-title">面板标题</h3>
	    </div>
	    <div class="panel-body">
	        这是一个基本的面板
	    </div>
	</div>
	<div class="panel panel-danger">
	    <div class="panel-heading">
	        <h3 class="panel-title">面板标题</h3>
	    </div>
	    <div class="panel-body">
	        这是一个基本的面板
	    </div>
	</div>	
	
	<h2>3.3-带列表组的面板</h2>
	<div class="panel panel-default">
	    <div class="panel-heading">面板标题</div>
	    <div class="panel-body">
	        <p>这是一个基本的面板内容。这是一个基本的面板内容。
	            这是一个基本的面板内容。这是一个基本的面板内容。
	            这是一个基本的面板内容。这是一个基本的面板内容。
	            这是一个基本的面板内容。这是一个基本的面板内容。
	        </p>
	    </div>
	    <ul class="list-group">
	        <li class="list-group-item">免费域名注册</li>
	        <li class="list-group-item">免费 Window 空间托管</li>
	        <li class="list-group-item">图像的数量</li>
	        <li class="list-group-item">24*7 支持</li>
	        <li class="list-group-item">每年更新成本</li>
	    </ul>
	</div>
	
	<h1>4-well</h1>
	Well 是一种会引起内容凹陷显示或插图效果的容器
	<div class="well well-lg">您好，我在大的 Well 中！</div>
	<div class="well well-sm">您好，我在小的 Well 中！</div>
	
	</body>
</html>
